import React, {Component, PureComponent} from "react";
import {
	View,
	Text,
	Image,
	StyleSheet,
	StatusBar,
	FlatList,
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

import ImageButton from "../components/ImageButton";

const arr = [
	{key: 1, name: "network", text: "互联网", url: require("../images/hd2.jpg")},
	{key: 9, name: "pet", text: "宠物", url: require("../images/sd.jpg")},
	{key: 2, name: "science", text: "科学", url: require("../images/bord.jpg")},
	{key: 7, name: "humanify", text: "人文", url: require("../images/chouxiang.jpg")},
	{key: 11, name: "funny", text: "搞笑", url: require("../images/funny.jpg")},
	{key: 19, name: "variety", text: "综艺", url: require("../images/view.jpg")},
]

export default class WeiboContent extends PureComponent {
	constructor(props) {
		super(props);
	}
	
	renderItem = ({item}) => (
			<ImageButton
				source={item.url}
				text={item.text}
				textStyle={styles.textBtn}
				onPress={() => this.props.navigation.navigate("CategoryWeibo", {title: item.text, name: item.name})}
			/>
	)

	render() {
		return (
			 <View style={styles.container}>
			 	<StatusBar 
					backgroundColor={gColor.bgColorOne}
				/>
				<FlatList
				  data={arr}
				  renderItem={this.renderItem}
				  horizontal={false}
				  numColumns={2}
				  refreshing={false}
				/>
			 </View>
		);
	}
}


const styles = StyleSheet.create({
	container: {
		padding: 1,
		flexDirection: "row",
		flexWrap: "wrap",
		flex: 1,
	},
	textBtn: {
		fontSize: gFontSize.one,
		color: gColor.fontColorFive,
	}
})